<template>
  <div>
    <div class="flex head-tip">
      <div>风险点</div>
      <div>控制活动</div>
    </div>
    <vue2-org-tree
            v-if="dataList.length  != 0"
            :key="index"
            :data="dataList"
            :horizontal="true"
            label-class-name="org-tree-node-disgn"
            :render-content="onRenderContent"
            collapsable
            @on-expand="onExpand"
    />
    <a-empty v-if="dataList.length == 0" description="暂无数据" />
  </div>
</template>

<script>
  import { getRiskAction,postRiskAction } from '@/api/manage';
  import Vue2OrgTree from '@/components/orgTree/org-tree';

  export default {
    name: 'MatrixMap',
    components: {
      Vue2OrgTree
    },
    props: {
      companyCode: {
        type: String,
        require: true,
      } ,
      manageCode: {
        type: String,
        require: true,
      } ,
      businessModelId: {
        type: String,
        require: true,
      }
    },
    data() {
      return {
        // type: Object
        dataList: {},
        data: []
      };
    },
    mounted() {
      // 树结构类型为object对象
      // this.data = { ...this.dataList }
      console.log(this.data)
    },
    methods: {
      /**
       * 展开收缩
       */
      onExpand(e, data) {
        if ("expand" in data) {
          data.expand = !data.expand;
          if (!data.expand && data.children) {
            this.collapse(data.children);
          }
        }
      },
      collapse(list) {
        var _this = this;
        list.forEach(function(child) {
          if (child.expand) {
            child.expand = false;
          }
          child.children && _this.collapse(child.children);
        });
      },
      setMapData(data){

        this.dataList = data
      },
      /**
       * dom自定义节点
       */
      onRenderContent(h, data){

        if(data.level == 4){
          const classname = 'org-tree-node-label1 ' + (data.type || '');
          return (
                  <div class={classname}>
                  <p class="header">{data.label}</p>
                  <p class="p2">风险事件</p>
                  <p class="p3" title="" >{data.title}</p>
                  <div class="btn-line">
                  <a-button size="small" on-click={ () => this.onEvaluaClick(h, data) }>问题整改</a-button>
          <a-button size="small" on-click={ () => this.onRectificaClick(h, data) }>风控评价</a-button>
          </div>
          </div>
        );
        }else if([5].includes(data.level)){
          const classname = 'org-tree-node-label2 ' + (data.type || '');
          return (
                  <div class={classname}>
                  <p class="p2">风险因素</p>
                  <p class="p3" title="">{data.title}</p>
                  </div>
        );
        }
        else if ([6].includes(data.level)){
          const classname = 'org-tree-node-label2 col2' + (data.type || '');


          if (data.controlAttributeCode == 1){
            return (
                    <div class={classname}>
                    <a-icon type="star" theme="filled" class="star-icon" />
                    <p class="header">{data.label}</p>
                    <p class="p2">控制活动</p>
                    <p class="p3" title="">{data.title}</p>
                    </div>
            );
          }
          else {
            return (
                    <div class={classname}>
                    <p class="header">{data.label}</p>
                    <p class="p2">控制活动</p>
                    <p class="p3" title="">{data.title}</p>
                    </div>
          );
          }


        }
        else if(!data.level || [1,2 ,3].includes(data.level)){
          return (
                  <span class="title">{data.label}</span>
        );
        }
      },
      /**
       * 节点点击
       */
      onEvaluaClick(e, data){
        console.log(e, data)
        const routeUrl = this.$router.resolve({
          path: '/internal/matrix/lssue',
          query: {
            id: data.id ,
            companyCode:this.companyCode ,
            manageCode:this.manageCode ,
            businessModelId:this.businessModelId
          }
        });
        window.open(routeUrl.href, '_blank');
      },
      onRectificaClick(e, data){
        let routeUrl;
        routeUrl = this.$router.resolve({
          path: '/internal/matrix/assess',
          query:
          {
            id: data.id ,
            companyCode:this.companyCode ,
            manageCode:this.manageCode ,
            businessModelId:this.businessModelId
          }
        });
        window.open(routeUrl.href, '_blank');
      }
    }
  };
</script>
<style lang="scss" scoped>
  .header,.p2,.p3{font-size: 12px;}
  .head-tip{
    >div{text-align: center;font-size:14px;padding:8px;
      &:nth-child(1){background-color: #E1E8F6;color: #4183D9;width: 868px;}
      &:nth-child(2){background-color: #D4EEE4;color: #407E67;width: calc(100% - 868px)}
    }
  }
</style>
